<template>
  <view class="share">
    <view class="share-buttons">
      <button class="share-btn" open-type="share" @click="handleShare">
        分享
      </button>
    </view>
    <view class="share-info">
      <text class="platform-info">当前平台: {{ platformInfo }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
import { share } from '@/utils/wx.sdk';
import { getWxSDKConfig } from '@/service/api';
// 使用动态导入
const platformInfo = ref('检测中...');
const wxConfig = ref({});
// 检测平台
const detectPlatform = () => {
  // #ifdef H5
  const ua = navigator.userAgent.toLowerCase();
  if (ua.includes('micromessenger')) {
    platformInfo.value = '微信浏览器';
    return 'wechat';
  } else {
    platformInfo.value = 'H5浏览器';
    return 'h5';
  }
  // #endif
};

const handleShare = () => {
  const currentUrl = window.location.href;
  const options = {
    title: 'uni',
    desc: 'uni-app分享',
    link: currentUrl,
    imgUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
  };
  share.shareCode(wxConfig.value, options, () => {
    console.log('分享成功');
  });
};

const getWxSDKConfigFn = () => {
  // 获取当前页面完整URL
  const currentUrl = window.location.href;
  console.log('当前页面URL:', currentUrl);

  getWxSDKConfig({
    url: currentUrl,
  }).then((res: any) => {
    wxConfig.value = res.data;
  });
};

onLoad(() => {
  detectPlatform();
  getWxSDKConfigFn();
});
</script>

<!-- <script>
// 小程序分享配置
// #ifdef MP-WEIXIN
export default {
  onShareAppMessage(res) {
    console.log('分享给朋友', res);
    return {
      title: 'uni-app分享',
      path: '/pages/share/share',
      imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
    };
  },

  onShareTimeline() {
    console.log('分享到朋友圈');
    return {
      title: 'uni-app分享',
      imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
    };
  },
};
// #endif
</script> -->

<style scoped>
.share {
  padding: 20px;
  text-align: center;
}

.share-buttons {
  margin-bottom: 30px;
}

.share-btn {
  display: inline-block;
  margin: 0 10px;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  background-color: #07c160;
  color: white;
}

.share-btn:hover {
  background-color: #06ad56;
}

.share-info {
  margin-top: 20px;
}

.platform-info,
.share-status {
  display: block;
  margin: 10px 0;
  font-size: 14px;
  color: #666;
}

.share-status {
  font-weight: bold;
}
</style>
